<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
		<link rel="stylesheet" href="../../css/chat.css" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
		</style>
	</head>

	<body contextmenu="return false;">
		
		<header class="mui-bar mui-bar-nav title" style="position: fixed;">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left title-color"></a>
		    <h1 class="mui-title title-color" id="chat_mark_name"></h1>
		</header>
		
		<div id="msg-outter" class="mui-content">
			<div id='msg'>
				<!--<div class="friend_lists">
					<div class="header_img">
						<img src="../../img/bg.jpg" width="40px" height="40px" />
					</div>
					<div class="msg-wrapper right">
						<p class="msg-left-white">来来来</p>
					</div>
				</div>
				<div class="me_lists">
					<div class="header_img">
						<img src="../../img/app-iPhone@3x.png" width="40px" height="40px" />
					</div>
					<div class="msg-wrapper left">
						<p class="msg-right-green">好的，没问题！时间地点？</p>
					</div>
				</div>-->
			</div>
		</div>
		
		<footer>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
			</div>
			<label for="" class="footer-right">
				<button type="button" id='send' class="mui-btn mui-btn-grey">发送</button>
			</label>
		</footer>
		
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/app.js" ></script>
		<script type="text/javascript">
			mui.init();
			
			var friendId;
			var friendMarkName;
			var friendAvatar;
			
			//创建命名空间
			//(function($, doc){
			mui.plusReady(function(){
				var me = app.getUserInfo();
				//设置聊天页面的软键盘模式
				var chatWebview = plus.webview.currentWebview();
				chatWebview.setStyle({
					softinputMode: "adjustResize"
				});
				
				friendId = chatWebview.friendId;
				friendMarkName = chatWebview.friendMarkName;
				friendAvatar = chatWebview.friendAvatar;
				
				document.getElementById("chat_mark_name").innerHTML = friendMarkName;
				
				//初始化聊天信息
				initChatData();
				
				mui('.mui-content').scroll();
				
				var createMsgList = document.getElementById("msg");
				console.log("执行了：" + createMsgList.scrollTop);
				createMsgList.scrollTop = createMsgList.scrollHeight + createMsgList.offsetHeight;
				console.log("执行了111：" + createMsgList.scrollTop);
				
				var msg_text = document.getElementById("msg-text")
				var send = document.getElementById("send")
				msg_text.addEventListener("input", function(){
					var msg_val = msg_text.value;
					if(msg_val.length > 0) {
						send.setAttribute("class", "mui-btn-blue")
					}else{
						send.setAttribute("class", "mui-btn-grey")
					}
				})
				
				window.addEventListener("resize", function(){
					resizeScroll();
					document.getElementById("msg-outter").style.paddingBottom = "50px";
				});
				
				//发送消息
				send.addEventListener("tap", function(){
					//获取当前的网络
					var netWorkStatus = plus.networkinfo.getCurrentType();
					if(netWorkStatus == plus.networkinfo.CONNECTION_UNKNOW || netWorkStatus == plus.networkinfo.CONNECTION_NONE){
						app.showToast("请检查您的网络...", "error");
						return;
					}
					
					var msg_text_val = msg_text.value;
					if(msg_text_val.length === 0) {
						return;
					}
					
					sendMsg(me.avatar, msg_text_val);
					//发送完成要清空
					msg_text.value = "";
					send.setAttribute("class", "mui-btn-grey");
					
					// 构建ChatMsg
					var chatMsg = new app.ChatMsg(me.userId, friendId, msg_text_val, null);
					// 构建MessageData
					var dataContent = new app.MessageData(app.MSG_CHAT, chatMsg, null);
					
					//调用websocket发送消息到后端
					var wsWebsocket = plus.webview.getWebviewById("feixin_chatlist.html");
					console.log("@@@"+ JSON.stringify(wsWebsocket));
					wsWebsocket.evalJS("CHAT.chat('"+ JSON.stringify(dataContent) +"')")
					
					// 保存聊天历史记录到本地缓存
					app.saveFriendChatHistory(me.userId, friendId, msg_text_val, app.MY_MSG);
					app.saveFriendChatSnapshot(me.userId, friendId, msg_text_val, true);
					
					//receiveMsg("模拟收受消息");
				});
				
				
			});
			
			function resizeScroll(){
				var createMsgList = document.getElementById("msg");
				console.log("执行了22：" + createMsgList.scrollTop);
				createMsgList.scrollTop = createMsgList.scrollHeight + createMsgList.offsetHeight;
			}
			
			//发送消息渲染
			function sendMsg(icon, msg) {
				var msgHtml = '<div class="me_lists">' +
									'<div class="header_img">' +
										'<img src="'+ icon +'" width="40px" height="40px" style="border-radius: 5px;"/>' +
									'</div>' +
									'<div class="msg-wrapper left">' +
										'<p class="msg-right-green">'+ msg +'</p>' +
									'</div>' +
								'</div>';
				var msg_list = document.getElementById("msg");
				msg_list.insertAdjacentHTML("beforeend", msgHtml);
				
				playSendMsgSount();
			}
			
			//接收消息渲染
			function receiveMsg(msg) {
				var msgHtml = '<div class="friend_lists">' +
									'<div class="header_img">' +
										'<img src="'+ friendAvatar +'" height="40px" style="border-radius: 5px;"/>' +
									'</div>' +
									'<div class="msg-wrapper right">' +
										'<p class="msg-left-white">'+ msg +'</p>' +
									'</div>' +
								'</div>';
				var msg_list = document.getElementById("msg");
				msg_list.insertAdjacentHTML("beforeend", msgHtml);
				
				playReceiveMsgSount();
			}
			
			//播放发送消息的铃声
			function playSendMsgSount(){
				var audioPlay = plus.audio.createPlayer("../../mp3/send.mp3");
				audioPlay.play();
			}
			
			//播放接收消息的铃声
			function playReceiveMsgSount(){
				var audioPlay = plus.audio.createPlayer("../../mp3/msn.mp3");
				audioPlay.play();
			}
			
			//初始化聊天，从缓存获取并渲染
			function initChatData() {
				var msg_list = document.getElementById("msg");
				var me = app.getUserInfo();
				var myId = me.userId;
				var myAvatar = me.avatar;
				var chatHistoryList = app.getFriendChatHistory(myId, friendId);
				
				var chatHtml = "";
				for (var i = 0; i < chatHistoryList.length; i++) {
					var chatHistory = chatHistoryList[i];
					if(chatHistory.flag == app.MY_MSG) {
						chatHtml += '<div class="me_lists">' +
										'<div class="header_img">' +
											'<img src="'+ myAvatar +'" width="40px" height="40px" style="border-radius: 5px;"/>' +
										'</div>' +
										'<div class="msg-wrapper left">' +
											'<p class="msg-right-green">'+ chatHistory.msg +'</p>' +
										'</div>' +
									'</div>';
					}else{
						chatHtml += '<div class="friend_lists">' +
										'<div class="header_img">' +
											'<img src="'+ friendAvatar +'" height="40px" style="border-radius: 5px;"/>' +
										'</div>' +
										'<div class="msg-wrapper right">' +
											'<p class="msg-left-white">'+ chatHistory.msg +'</p>' +
										'</div>' +
									'</div>';
					}
				}
				
				msg_list.innerHTML = chatHtml;
			}
			//}(mui, document));
		</script>
	</body>

</html>